import { ref } from 'vue'
import { FormItemType } from '@/components/form/type'
import { formPropOption, LabelType } from '../types'

import app_icon_1 from '/src/assets/images/app/1.png'
import app_icon_2 from '/src/assets/images/app/2.png'
import app_icon_3 from '/src/assets/images/app/3.png'
import app_icon_4 from '/src/assets/images/app/4.png'
import app_icon_5 from '/src/assets/images/app/5.png'
import app_icon_6 from '/src/assets/images/app/6.png'
import app_icon_7 from '/src/assets/images/app/7.png'

export const useDevelopHook = () => {
  const formLabelType = ref<LabelType[]>([
    {
      title: '文本',
      content: [
        { type: 'input', label: '单行文本', img: app_icon_1 },
        { type: 'textarea', label: '多行文本', img: app_icon_2 },
      ],
    },
    {
      title: '选项',
      content: [
        { type: 'radio', label: '单选', setProp: true, img: app_icon_3 },
        { type: 'checkbox', label: '多选', setProp: true, img: app_icon_4 },
        // { type: 'select', label: '下拉选项', setProp: true },
      ],
    },
    {
      title: '上传',
      content: [
        // { type: 'uploadTxt', label: '文件上传', img: app_icon_5 },
        { type: 'uploadFile', label: '文件上传', img: app_icon_5 },
        { type: 'uploadFiles', label: '多文件上传', multiple: true, img: app_icon_6 },
        { type: 'uploadImg', label: '图片上传', accept: 'image/*', img: app_icon_7 },
      ],
    },
  ])

  const formOptionData = ref<formPropOption>({
    title: '标题',
    tableName: '',
    titleEn: '',
    them: 0,
    order: 0,
    sort: '',
  })
  const formOption = ref<FormItemType[]>([
    {
      type: 'input',
      label: '标题',
      prop: 'title',
    },
    {
      type: 'input',
      label: '表名',
      prop: 'tableName',
    },
    {
      type: 'input',
      label: '说明',
      prop: 'titleEn',
    },
    {
      type: 'select',
      label: '样式切换',
      prop: 'them',
      options: [
        { label: '单列', value: 24 },
        { label: '双列', value: 12 },
      ],
    },
    {
      type: 'input',
      label: '序号',
      prop: 'order',
    },
    {
      type: 'slot',
      label: '操作',
      prop: 'sort',
      slotName: 'sortSlot',
    },
  ])

  return {
    formLabelType,
    formOptionData,
    formOption,
  }
}
